<template>
	<view>
		<!-- 头部 -->
		<view class="title">
			<image class="returnh" src="../../../static/iconfanhui.png"></image>
			<image style="width: 100%;height: 600rpx;" src="../../../static/28a3b451f81986184a86281a4aed2e7389d4e6a0.jpg"></image>
		</view>
		<!--  -->
		<view class="w90">
			<h3 class="fs16" style="padding: 14rpx 0 0 0; ">9.9豪华单人麻辣香锅+米饭套餐</h3>
			<text class="fs12" style="color: rgba(153,153,153,1);">已售 126</text>
			<view style="height: 54rpx;margin-top: 22rpx;position: relative; ">
				<text class="rage fs12">￥</text>
				<text class="rage fs20">9.9</text>
				<text class="fs12" style="margin-left: 20rpx;color: #a4a4a4;text-decoration:  line-through;">￥18.8</text>
				<text class="MLgg" style="text-align: center;">选规格</text>
			</view>
		</view>
		<view style="height: 12rpx;background: rgba(250,250,250,1);margin-top: 14rpx;"></view>
		<view class="w90">
			<text class="fs14 pdd11">详情</text>
			<text class="fs14 pdd11">评价</text>
			<view class="fs12"  style="line-height: 32px;">
				<text style="color: rgba(138,138,138,1);"> 商品描述</text> 
				<text style="margin-left: 50rpx;">主要包括真拿豆腐，小龙虾，大螃蟹  </text>
			</view>
			<view  class="fs12"  style="line-height: 32px;">
				<text style="color: rgba(138,138,138,1);"> 主要材料</text> 
				<text style="margin-left: 50rpx;">鱼豆腐、培根</text>
			</view>
			<view class="fs12" style="line-height: 32px;">
				<text style="color: rgba(138,138,138,1);"> 商品分量</text> 
				<text style="margin-left: 50rpx;">大约500g</text>
			</view>
		</view>
		<view style="height: 12rpx;background: rgba(250,250,250,1);margin-top: 14rpx;"></view>
		<view class="w90">
			<view style="position: relative;margin-top: 36rpx;">
				<h5 class="fs14">外卖评价</h5>
				<text class="fs12" style="position: absolute;right:50rpx;top: 0;">126条评论</text>
				<i class="returns"></i>
			</view>
			<view class="pingjia">
				<view class="pjtit">
					<image src="../../../static/22.png" ></image>
					<text class="fs11" style="position: absolute;left: 90rpx;top: 38rpx;color:rgba(51,51,51,1);">怪盗基德</text>
					<view class="pjxing" style="display: flex;">
						<text v-for="item in 5" :class="item<=num?'dianx':''"></text>
					</view>
					<text class="fs11" style="position: absolute;right: 0;top: 45rpx;color: rgba(136,136,136,1);">2020-01-26</text>
				</view>
				<view style="margin-left: 90rpx;">
					<text class="fs11" style="color: rgba(51,51,51,1);">好吃分量也多~</text>
					<view class="pjimgs" style="display: flex;">
						<image src="../../../static/22.png" mode=""></image>
						<image src="../../../static/22.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<view class="pofx" style="">
			<view class="pobtm" >
			<view class="poleft">
				<image style="width: 68rpx;height: 58rpx;padding: 12rpx 44rpx;" src="../../../static/icon8.png"
					mode=""></image>
				<view class="text33">
					<text calss="fs16s">18.8</text><text class="fs12"
						style="margin-left: 20rpx;text-decoration:line-through;">￥28.8</text><br>
					<text class="fs10">配送费￥2</text>
				</view>
			</view>
			<view class="poright center" >
				去结算
			</view>
		</view>
		</view>
		
	</view>
</template>	

<script>
	export default {
		data() {
			return {
				num:3
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.title{
	height: 600rpx;
		position: relative;
		background: #FFFFFF;
	}
	.returnh{
		 width: 18rpx;
		 height: 32rpx;
		 position: absolute;
		 left: 34rpx;
		 top: 25rpx;
		 z-index: 2;
	}
	.w90{
		width: 90%;
		margin: 0 auto;
	}
	.rage{
		color: rgba(254,64,30,1);
	}
	.MLgg{
		width: 108rpx;
		height: 48rpx;
		background: rgba(36, 188, 129, 1);
		color: #FFFFFF;
		border-radius: 24rpx;
		line-height: 48rpx;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.pdd11{
		display: inline-block;
		padding: 22rpx;
	}
	.returns{
		width: 10rpx;
		height: 18rpx;
		background: url(../../../static/iconfh.png);
		position: absolute;
		right: 0;
		top: 8rpx;
	}
	.pjtit{
		height: 100rpx;
		padding: 22rpx 0;
		position: relative;
	}
	.pjtit>image{
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}
	.pjxing{
		position: absolute;
		left: 90rpx;
		bottom: 0rpx;
	}
	.pjxing>text{
		display:block;
		width: 18rpx;
		height: 18rpx;
		margin: 5rpx;
		background: url(../../../static/iconhui.png);
	}
	.dianx{
		background: url(../../../static/iconhxx.png)!important;
	}
	.pjimgs>image{
		width: 158rpx;
		height: 158rpx;
		margin: 11rpx 11rpx 11rpx 0;
	}
	.pofx{
		width: 100%;
		height: 130rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0rpx;
		
	}
	.pobtm {
		width: 686rpx;
		height: 90rpx;
		border-radius: 90rpx;
		line-height: 90rpx;
		position: absolute;
		top: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		overflow: hidden;
	}
	
	.poleft {
		width: 492rpx;
		height: 90rpx;
		background: rgba(36, 188, 129, 1);
		position: relative;
		line-height: 30rpx;
		color: #FFFFFF;
	}
	
	.poright {
		width: 194rpx;
		height: 90rpx;
		background: #FFCB57;
		font-weight: 700;
		color: #333333;
	}
	
	.text33 {
		position: absolute;
		left: 130rpx;
		top: 10rpx;
	}
</style>
